import React, { createRef, useEffect, useState } from "react";

export default function ArrowCanvas(props: {
  startDom: HTMLElement;
  endDom: HTMLElement;
}) {
  const canvasRef = createRef<HTMLCanvasElement>();

  //states
  const [startRight, setStartRight] = useState(0);
  const [startTop, setStartTop] = useState(0);
  const [endLeft, setEndLeft] = useState(0);
  const [endTop, setEndTop] = useState(0);

  const { startDom, endDom } = props;

  // didmount
  useEffect(() => {
    const canvasDom = canvasRef.current;
    if (canvasDom) {
      // set canvas to cover parent
      const parent = canvasDom.parentElement;
      if (parent) {
        // let canvas cover the viewport
        canvasDom.width = parent.offsetWidth - 1; //不减1可能会出现滚动条闪烁情况
        canvasDom.height = parent.offsetHeight;
      }
      const trackElement = () => {
        setStartTop(
          startDom.getBoundingClientRect().top -
            canvasDom.getBoundingClientRect().top
        );
        setStartRight(
          startDom.getBoundingClientRect().right -
            canvasDom.getBoundingClientRect().left
        );
        setEndTop(
          endDom.getBoundingClientRect().top -
            canvasDom.getBoundingClientRect().top
        );
        setEndLeft(
          endDom.getBoundingClientRect().left -
            canvasDom.getBoundingClientRect().left
        );
        console.log("tracking Element");
      };
      //init, set canvas and targets ready
      trackElement();

      const mouseDown = () => {
        console.log("down");
        document.addEventListener("mousemove", trackElement);
      };
      const mouseUp = () => {
        console.log("up");
        // BUG: 这里有bug，mousemove函数在点击TreeBar拖动框并移动后没有被请理，换成类组件就好了，问题待探究
        document.removeEventListener("mousemove", trackElement);
      };

      window.addEventListener("resize", trackElement);
      document.addEventListener("mousedown", mouseDown);
      document.addEventListener("mouseup", mouseUp);

      return () => {
        window.removeEventListener("resize", trackElement);
      };
    }
  });

  // 监听到距离变化重新绘制
  useEffect(() => {
    const canvasDom = canvasRef.current;
    if (canvasDom) {
      const parent = canvasDom.parentElement;
      if (parent) {
        // let canvas cover the viewport
        canvasDom.width = parent.offsetWidth - 1; //不减1可能会出现滚动条闪烁情况
        canvasDom.height = parent.offsetHeight;
      }
      const ctx = canvasDom.getContext("2d");
      if (ctx) {
        ctx.moveTo(startRight, startTop + startDom.offsetHeight / 2);
        ctx.lineTo(endLeft, endTop + endDom.offsetHeight / 2); //返回元素的偏移位置。还有一个偏移容器
        ctx.stroke();
      }
    }
  }, [
    startTop,
    startRight,
    endTop,
    endLeft,
    canvasRef,
    startDom.offsetHeight,
    endDom.offsetHeight,
  ]);

  return (
    <canvas
      id="canvas"
      style={{
        position: "absolute",
        // position: "fixed",
        // left: 0,
        // top: 0,
        // bottom: 0,
        // right: 0,
        pointerEvents: "none",
      }}
      ref={canvasRef}
    ></canvas>
  );
}
